<template>
  <div id="replay">
    <div class="item">
      <div class="player"
           :class="{'full-screen':fullScreen}">
        <video ref="videoPlayer"
               id="videoOutput"
               :muted="muted"
               autoplay
               width="100%"
               height="100%"
               poster="">
        </video>
        <div class="video-control">
          <div class="left-control control-wrap">
            <div class="control-item"
                 v-show="!playing"
                 id="start"
                 @click="playButton(true)">
              <Icon type="ios-play" />
            </div>
            <!-- <div class="control-item"><Icon type="md-square" /></div> -->
            <div class="control-item"
                 v-show="playing"
                 id="stop"
                 @click="playButton(false)">
              <Icon type="ios-pause" />
            </div>
            <div class="control-item"
                 @click="refresh">
              <Icon type="md-refresh" />
            </div>
          </div>
          <div class="right-control control-wrap">
            <!-- <div class="control-item"
                 style="font-size:14px">
              {{currentTime}}
            </div>
            <div class="control-item">
              <Slider style="width:500px;">
              </Slider>
            </div>
            <div class="control-item"
                 style="font-size:14px;margin-right:20px;">
              60.00
            </div> -->
            <div class="control-item">
              <Slider v-model="volume"
                      style="width:100px;"
                      @on-input="changeVolume">
              </Slider>
            </div>
            <div class="control-item"
                 style="width:85px;">
              <i-switch size="large"
                        v-model="active">
                <span slot="open">弹幕开</span>
                <span slot="close">弹幕关</span>
              </i-switch>
            </div>
            <div class="control-item"
                 @click="changeScreen">
              <Icon :type="fullScreen?'ios-browsers-outline':'ios-expand'" />
            </div>
          </div>
        </div>
        <div v-show="false">Set source URL: <input style="width:350px;"
                 ref="address"
                 id="address"
                 type="text"
                 v-model="addressValue"></div>
        <div class="tanmu"
             style="height:calc(100px)"
             ref="barrage_wrap"
             :class="{on:active}"></div>
        <div class="tanmu2"
             style="height:calc(100px)"
             ref="barrage_wrap2"
             :class="{on:active}"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getopts, setIceCandidateCallbacks, onError, showSpinner, hideSpinner } from '@/libs/video-control.js'
import { queryResourcesDemand } from '@/api/data'
export default {
  data () {
    return {
      // videojs options
      active: false,
      value: '',
      switch1: false,
      height: 0,
      width: 0,
      danmu: [
        {
          time: 12,
          text: '666',
          color: 'red',
          show: true
        },
        {
          time: 13,
          text: 'qqqq',
          color: 'green',
          show: true
        },
        {
          time: 14,
          text: 'wwww',
          color: 'blue',
          show: true
        },
        {
          time: 16,
          text: '161616',
          color: '#fff',
          show: true
        },
        {
          time: 18,
          text: '181818',
          color: '#fff',
          show: true
        }
      ],
      danmu2: [
        {
          time: 12,
          text: '666',
          color: 'red',
          show: true
        },
        {
          time: 13,
          text: 'qqqq',
          color: 'green',
          show: true
        },
        {
          time: 14,
          text: 'wwww',
          color: 'blue',
          show: true
        },
        {
          time: 16,
          text: '161616',
          color: '#fff',
          show: true
        },
        {
          time: 18,
          text: '181818',
          color: '#fff',
          show: true
        }
      ],
      // 音量
      volume: 10,
      // 播放状态
      playing: false,
      // 静音
      muted: false,
      // 是否全屏
      fullScreen: false,
      // 播放视频dom
      videoOutput: '',
      address: "",
      addressValue: "",
      pipeline: "",
      webRtcPeer: "",
      args: getopts(location.search, {
        default: {
          ws_uri: 'ws://192.168.201.187:8888/kurento',
          // ws_uri: 'ws://' + location.hostname + ':8888/kurento',
          ice_servers: undefined
        }
      }),
      currentTime: 0.00,
      pageNum: 0,
      pageSize: 10,
      videoFileName: ""
    }
  },
  mounted () {
    this.videoFileName = sessionStorage.getItem('replayData')
    let _this = this
    this.send = this.$start(this.$refs.barrage_wrap)
    this.send2 = this.$start(this.$refs.barrage_wrap2)
    // 播放视频dom初始化
    // var args = getopts(location.search, {
    //   default: {
    //     ws_uri: 'ws://192.168.201.43:8888/kurento',
    //     // ws_uri: 'ws://' + location.hostname + ':8888/kurento',
    //     ice_servers: undefined
    //   }
    // })

    if (this.args.ice_servers) {
      console.log('Use ICE servers: ' + this.args.ice_servers)
      kurentoUtils.WebRtcPeer.prototype.server.iceServers = JSON.parse(
        this.args.ice_servers
      )
    } else {
      console.log('Use freeice')
    }
    this.videoOutput = this.$refs.videoPlayer
    this.address = this.$refs.address
    this.addressValue = `file:///vod/${this.videoFileName}`

    // var pipeline
    // var webRtcPeer
    // var startButton = document.getElementById('start')
    // startButton.addEventListener('click', start)
    // var stopButton = document.getElementById('stop')
    // stopButton.addEventListener('click', stop)
    // 视频播放停止控制
    // import('./index.js')
    // 视频初始音量
    this.$refs.videoPlayer.volue = this.volume * 0.01
    // 监听视频播放
    this.$refs.videoPlayer.addEventListener('play', function () {
      this.active = true
      console.log('play')
    })
    // 监听视频暂停
    this.$refs.videoPlayer.addEventListener('pause', function () {
      console.log('pause')
    })
    // 监听视频时间更新
    this.$refs.videoPlayer.addEventListener('timeupdate', function () {
      console.log('timeupdate')
      console.log(this.currentTime)
      _this.currentTime = this.currentTime
    })
    console.log('duration')
    console.log(this.$refs.videoPlayer.duration)
  },
  computed: {
  },
  methods: {
    sendon () {
      console.log('111')
      this.send({
        text: '666',
        color: 'green'
      })
    },
    // 播放停止
    playButton (flag) {
      console.log(this.addressValue)
      let _this = this
      this.playing = flag
      if (flag) {
        if (!this.addressValue) {
          window.alert('You must set the video source URL first')
          return
        }
        this.address.disabled = true
        showSpinner(this.videoOutput)
        var options = {
          remoteVideo: this.videoOutput
        }
        this.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function (
          error
        ) {
          if (error) {
            return console.error(error)
          }
          _this.webRtcPeer.generateOffer(_this.onOffer)
          _this.webRtcPeer.peerConnection.addEventListener(
            'iceconnectionstatechange',
            function (event) {
              if (_this.webRtcPeer && _this.webRtcPeer.peerConnection) {
                console.log(
                  'oniceconnectionstatechange -> ' +
                  _this.webRtcPeer.peerConnection.iceConnectionState
                )
                console.log(
                  'icegatheringstate -> ' +
                  _this.webRtcPeer.peerConnection.iceGatheringState
                )
                console.log('duration')
                console.log(_this.$refs.videoPlayer.duration)
              }
            }
          )
        })
      } else {
        this.address.disabled = false
        if (this.webRtcPeer) {
          this.webRtcPeer.dispose()
          this.webRtcPeer = null
        }
        if (_this.pipeline) {
          _this.pipeline.release()
          _this.pipeline = null
        }
        hideSpinner(this.videoOutput)
      }
    },
    changeMuted () {
      this.muted = !this.muted
    },
    // 调节音量
    changeVolume (value) {
      this.$refs.videoPlayer.volume = value * 0.01
    },
    // 切换全屏
    changeScreen () {
      this.fullScreen = !this.fullScreen
    },
    // 刷新
    refresh () {
      this.$router.go(0)
    },
    onOffer (error, sdpOffer) {
      let _this = this
      if (error) return onError(error)

      kurentoClient(this.args.ws_uri, function (error, kurentoClient) {
        if (error) return onError(error)

        kurentoClient.create('MediaPipeline', function (error, p) {
          if (error) return onError(error)

          _this.pipeline = p

          _this.pipeline.create('PlayerEndpoint', { uri: _this.addressValue }, function (
            error,
            player
          ) {
            if (error) return onError(error)

            _this.pipeline.create('WebRtcEndpoint', function (error, webRtcEndpoint) {
              if (error) return onError(error)

              setIceCandidateCallbacks(webRtcEndpoint, _this.webRtcPeer, onError)

              webRtcEndpoint.processOffer(sdpOffer, function (error, sdpAnswer) {
                if (error) return onError(error)

                webRtcEndpoint.gatherCandidates(onError)

                _this.webRtcPeer.processAnswer(sdpAnswer)
              })

              player.connect(
                webRtcEndpoint,
                function (error) {
                  if (error) return onError(error)

                  console.log(
                    'PlayerEndpoint-->WebRtcEndpoint connection established'
                  )

                  player.play(function (error) {
                    if (error) return onError(error)

                    console.log('Player playing ...')
                  })
                }
              )
            })
          })
        })
      })
    },
  }
}
</script>
<style lang="scss">
#replay {
  height: 100vh;
  box-sizing: border-box;
  & > .item {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    & > .player {
      flex: 1;
      height: 100%;
      position: relative;
      &.full-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2;
        background: #000;
      }
      & > .video-control {
        position: absolute;
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        bottom: 0;
        height: 32px;
        line-height: 32px;
        width: 100%;
        background: #fff;
        .control-wrap {
          display: flex;
          .control-item {
            padding: 0 5px;
            font-size: 0;
            cursor: pointer;
            .ivu-icon {
              font-size: 20px;
            }
            .ivu-switch-large {
              width: 76px;
            }
            .ivu-slider {
              margin-top: -2px;
            }
            .ivu-switch-large.ivu-switch-checked:after {
              left: 55px;
            }
          }
        }
      }
      & > .tanmu {
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        border: 1px solid red;
        display: none;
        z-index: 10000000000;
      }
      & > .tanmu2 {
        position: absolute !important;
        left: 0;
        top: 100px;
        width: 100%;
        border: 1px solid green;
        display: none;
        z-index: 10000000000;
      }
      & > .on {
        display: block;
        font-size: 20px;
      }
    }
  }
}
</style>
